/* =================================== */
/*  About Page Styles
/* =================================== */

.aboutpage-feedback-area{
    background:$offwhite!important;

}


/*-------- Start Skillbar Style  -------------*/

.single-skill{
    p{
        margin-top:30px;
        margin-bottom:5px;
        text-align: right;
    }
}

.sb_progress{
    height:14px!important;
    border-radius:12px;
    border:3px solid #eee;
}

.sb_bar{
    @extend .p1-gradient-bg;
    height:8px!important;
    border-radius:12px;
}

/*--------  End Skillbar Style  -------------*/

$content-width: 360px;


.timeline{
  ul{
    
    li{
      background: $offwhite;
      position: relative;
      margin: 0 auto;
      width: 2px;
      padding-bottom: 40px;
      list-style-type: none;
      
      &:last-child{
        padding-bottom: 7px;
      }
      
      &:before{
        content: '';
        background: $primary-color;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        width: 20px;
        height: 20px;
        border: 5px solid #eee;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }
      
      .hidden {
        opacity: 0;
      }
      
      .content{
        background-color: rgb(255, 255, 255)!important;
        box-shadow: 0px 10px 27px 3px rgba(204, 204, 204, 0.2);
        position: relative;
        top: 7px;
        width: $content-width;
        padding: 30px;
        
        h4{
          padding-bottom: 10px;
          text-align: center;
        }
        
        p{
          text-align: center;
          margin-bottom:5px;
          b{
            color:$black;
          }
        }
      
      }
      
      &:nth-child(odd) .content {
        left: 50px;
      }
      
      &:nth-child(odd) .content:before {
        left: -38px;
      }
      
      &:nth-child(even) .content {
        left: calc(-#{$content-width} - 45px);
      }
      
      &:nth-child(even) .content:before {
        right: -38px;
      }
    }
  }
}

/* -------------------------
   ----- Media Queries ----- 
   ------------------------- */

@media screen and (max-width: 1020px) {
  .timeline ul li .content {
    width: 41vw;
  }
  .timeline ul li:nth-child(even) .content {
    left: calc(-41vw - 45px);
  }
}

@media screen and (max-width: 700px) {
  .timeline ul li {
    margin-left: 20px;
    
    .content {
      width: calc(100vw - 100px);
    
      h2{
        text-align: initial;
      }
    }
    
    &:nth-child(even) .content {
      left: 45px;
    }
    
    &:nth-child(even) .content:before {
      left: -33px;
    }
  }
}